<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>

</head>

<body>
    <div id="app">
        <comp-a :name="account" @zrw="test"></comp-a>
        <comp-b :num="num"></comp-b>
        <!-- 动态传值，传的是父类的:name="account" ，父传子-->
    </div>
</body>
<!-- 多个模板复用，不可简写 -->

<script>
    let CompA = {
        props: ['name', 'age'],
        // 通过 Prop 向子组件传递数据
        data() {
            return {
                num: 0
            }
        },
        methods: {
            add() {
                this.num++;
                this.$emit('zrw', this.num)
            }
        },
        template: '<div><button @click="add">CompA</button>{{num}} {{name}}</div>'   //模板内容
    }

    let CompB = {
        props: ['num'],
        // 通过 Prop 向子组件传递数据
        methods: {

        },
        template: '<div><button>CompB</button>{{num}}</div>'   //模板内容
    }
    new Vue({
        el: "#app",
        data() {
            return {
                account: "jom",  //父的account绑在子的name上
                num: 0
            }
        },
        methods: {
            test(num) {
                this.num = num;
            }
        },
        components: {  //components组成
            CompA, CompB
        }
    })

</script>


</html>